<template>
    <div class="map" style="width:300px;">
        <div id="henan" ref='map'></div>
    </div>
</template>

<script>
import henanJson from "../../public/json/henan.json";
    export default {
        name: "MAP",
        data() {
            return {
               
            }
        },
       mounted(){
              this.inMap(this.mapdata)
              // console.log(this.mapdata)
       },
       computed:{
              mapdata(){
                     return this.$store.state.mapdata
              },
              clickdata(){
                     return this.$store.state.clickdata
              },
              clicked(){
                     return this.$store.state.clicked
              }
       },
       methods:{
              inMap: function (data) {
                     var mapEcharts = this.$echarts.init(this.$refs.map);
                     let that=this
                     mapEcharts.clear()
                     var option = {
                            tooltip: {
                            trigger: 'item',
                            showDelay: 0,
                            transitionDuration: 0.2,
                            formatter:function(x){
                                   return x.name+"<br>"+"A:"+x.data.A+"<br>"
                                          +"&nbsp B:"+x.data.B+"<br>"+"&nbspC:"+x.data.C+"<br>"
                                          +" &nbspD:"+x.data.D+"<br>"+"E:"+x.data.E
                                   
                            }
                            
                            },
                            label:{
                            fontSize:9,
                            },
                            
                     visualMap: [
                            {
                            type: "continuous",
                            itemWidth: 15,
                            itemHeight: 100,
                            min:0,
                            max:200,
                            right:-5,
                            y: "bottom",
                            inverse: true,
                            align: "right",
                            calculable: true, //是否显示拖拽用的手柄
                            inRange: {
                                   color: ["#C9E7FF", "#1e90ff"],
                            },
                            },
                            ],
                     series: [
                     {
                     type: "map",
                     mapType: "henan",
                     left: 40,
                     top: 30,
                     data:this.mapdata,
                     itemStyle: {
                            label: {
                            show: true,
                            },
                            normal: {
                            label: {
                            show: true,
                            },
                            borderColor: "gray",//地市边界颜色
                            borderWidth: 1,
                            },
                     },
                     emphasis: {
                            //鼠标划过去之后的颜色
                            disabled: false,
                            itemStyle: {
                            areaColor: "#FF902D",
                            },
                     },
                     select: {
                            //地图点击选中后显示的颜色
                            label: {
                            show: true,
                            },
                            itemStyle: {
                            areaColor: "#FF902D",
                            opacity: 1,
                            },
                     },
                     
                     },
                     ],
                     };
                     this.$echarts.registerMap("henan", henanJson);
                     mapEcharts.setOption(option, true);
                     window.addEventListener("resize", () => {
                            mapEcharts.resize();
                     });
                     mapEcharts.on("click",function(x){
                            that.$store.commit('qiehuan',x.name)
                            if(x.name==that.clickdata.name){
                                   that.clickdata.name=""
                                   that.clickdata.A=""
                                   that.clickdata.B=""
                                   that.clickdata.C=""
                                   that.clickdata.D=""
                                   that.clickdata.E=""
                                   
                                   
                            }
                            else
                            {
                            that.clickdata.name=x.name
                            that.clickdata.A=x.data.A 
                            that.clickdata.B=x.data.B
                            that.clickdata.C=x.data.C
                            that.clickdata.D=x.data.D
                            that.clickdata.E=x.data.E
                            // that.$store.commit('qiehuan',x.name)
                            }
                           
                            
                                                     
                     })
              },
                    
    }
 }
</script>

<style lang="scss" scoped>
.map{
       float:left;
       position: relative;
       left:-300px;
       top:50px;
       #henan {
        width: 300px;
        height: 300px;    
       }
}


</style>